<template>
  <div class="left">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>文件列表</span>
        </div>
      </template>
      <div @click="clickMd(item, index)" :class="[currentIndex === index ? 'active' : '']"
        v-for="(item, index) in props.filedata" :key="index" class="list">{{ item.name }}</div>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import { ref} from "vue"
import { MdFile } from "@/model/dataModel";

//接收父组件传递过来的值
const props = defineProps(["filedata"])
//调用父组件的函数
const emit = defineEmits(["viewfile"])

//当前索引
let currentIndex = ref<number>(0)

//单击选中
const clickMd = (file:MdFile, index: number) => {
  currentIndex.value = index
  //调用父组件的方法
  emit("viewfile",file)
}
</script>
<style scoped lang="scss">
.left {
  .el-card__body {
    div {
      box-shadow: #ccc;
      padding: 10px 10px;
      margin-bottom: 5px;
      background-color: #eee;
    }

    div:hover {
      cursor: pointer;
      background-color: #aaa;
    }

    .active {
      background-color: #aaa;
      color: #fff;
    }
  }
}
</style>